<!--
 * @Author: zhayang
 * @LastEditors: zhayang 1063975710@qq.com
 * @Date: 2024-06-13 21:07:40
 * @LastEditTime: 2024-06-16 22:21:09
 * @Description: 信息卡片
-->
<template>
  <div class="info-card rd-8 bg-#fff flex">
    <div class="info-img col-auto m-r-20 center">
      <img
        class="w-48 h-48"
        :src="data.img"
      />
    </div>
    <div class="info-content col flex flex-col full-h justify-center">
      <div class="info-title text-16 c-#6A6B6C">{{ data.label }}</div>
      <div
        class="info-bottom ellipsis m-t-8 text-24 font-600 c-#1C1F23 flex items-baseline"
      >
        {{ data.value }}
        <div
          v-if="data.unit"
          class="text-16 font-600"
        >
          {{ data.unit }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          label: '模型数量',
          value: '10',
          unit: '个',
          img: ''
        }
      }
    }
  },
  data() {
    return {
      levelList: null
    }
  },
  created() {
    //
  },
  methods: {
    //
  }
}
</script>

<style lang="scss" scoped>
.info-card {
  width: 100%;
  height: 120px;
  position: relative;
  padding: 20px;
}
</style>
